<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home/message' }">消息推送</el-breadcrumb-item>
          <el-breadcrumb-item>{{title==1?"新建推送":'查看详情'}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="推送标题" prop="messageTitle">
          <el-input
            v-model="ruleForm.messageTitle"
            placeholder="请输入推送标题，20字以内"
            maxlength="20"
            style="width:30%"
            :disabled="disabled"
          ></el-input>
        </el-form-item>

        <el-form-item label="推送内容" prop="messageContent">
          <el-input
            placeholder="请输入推送内容，50字以内"
            type="textarea"
            v-model="ruleForm.messageContent"
            maxlength="50"
            style="width:30%"
            :disabled="disabled"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item label="选择类型" prop="messageType">
          <el-select v-model="ruleForm.messageType" placeholder="请选择上传类型" style="width:30%">
            <el-option label="平台" :value="1"></el-option>
            <el-option label="充值" :value="2"></el-option>
            <el-option label="订单" :value="3"></el-option>
          </el-select>
        </el-form-item>-->

        <el-form-item label="推送时间" prop="messageSendType">
          <el-radio-group
            v-model="ruleForm.messageSendType"
            @change="changeRadio"
            :disabled="disabled"
          >
            <el-radio :label="1">现在推送</el-radio>
            <el-radio :label="2">定时推送</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="上架时间" prop="messageTime" v-if="timeshow">
          <el-date-picker
            :disabled="disabled"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="ruleForm.messageTime"
            style="width: 30%;"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" :disabled="disabled">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')" :disabled="disabled">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 是否禁用
      disabled: false,
      // 提示标题
      title: 1,
      dialogImageUrl: "",
      dialogVisible: false,
      // 是否显示时间
      timeshow: false,
      push: 2,
      // 获取当前时间
      time: new Date(),

      // 上传时间messageSendType 选择字段
      // 1 立即推送 2 定时推送
      ruleForm: {
        messageTitle: "",
        messageContent: "",
        messageType: "",
        messageTime: "",
        messageSendType: 1 //选择推送内型
      },
      rules: {
        messageTitle: [
          { required: true, message: "请输入推送标题", trigger: "blur" }
        ],
        messageContent: [
          { required: true, message: "请输入推送内容", trigger: "change" }
        ],
        messageSendType: [
          { required: true, message: "请输入推送类型", trigger: "change" }
        ],
        messageTime: [
          { required: true, message: "请选择推送时间", trigger: "change" }
        ]
      }
    };
  },
  created() {
    setTimeout(() => {
      if (this.$route.query.messageId) {
        // 是否开启修改
        this.disabled = true;
        // 修改展示标题
        this.title = 2;
        // 获取消息推送详情
        this.$http.article
          .getMessage({ pet_messageId: this.$route.query.messageId })
          .then(res => {
            console.log("获取消息推送详情", res);
            this.ruleForm = res.result; //回显原数据
            this.push = res.result.messageType; //回显原数据
            if (res.result.messageSendType == 2) {
              this.disabled = true;
              this.timeshow = true;
            }
          });
      }
    });
  },
  mounted() {
    this.getTime();
  },
  methods: {
    // 获取当前时间
    getTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      this.ruleForm.messageTime =
        yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    },
    // 获取选择的值
    changeRadio(val) {
      if (val == 2) {
        this.timeshow = true;
      } else {
        this.timeshow = !this.timeshow;
      }
      console.log("获取选中的值", val);
    },
    // 上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.$route.query.messageId) {
            var key = "messageId";
            var value = this.$route.query.messageId;
            this.ruleForm[key] = value;
            this.$http.article.updateMessage(this.ruleForm).then(res => {
              if (res.code == 200) this.$message.success("修改成功");
            });
            console.log("选择时间", this.ruleForm);
            return;
          } else {
            console.log("选择时间", this.ruleForm);
            this.$http.article.updateMessage(this.ruleForm).then(res => {
              if (res.code == 200) this.$message.success("新增成功");
              this.$router.push("/home/message");
              console.log("新增成功", res);
            });
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 98%;
  height: 100%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>